var curPageIdx = 5;
// 大家都在搜 列表
var commonSearchLists = [
   {id:0,keywords:'',resTitle:'2018王者荣耀KPL春季赛',subTitle:'更新至56期',href:''}
  ,{id:1,keywords:'',resTitle:'2018KPL【英雄麦克风】',subTitle:'更新至56期',href:''}
  ,{id:2,keywords:'',resTitle:'KPL极限操作：Knight艾克回到过去',subTitle:'更新至56期',href:''}
  ,{id:3,keywords:'',resTitle:'KPL4月8日WE vs OMG第二场比赛视频',subTitle:'更新至56期',href:''}
  ,{id:4,keywords:'',resTitle:'2018KPL春季赛第十周 WE vs SS回放',subTitle:'更新至56期',href:''}
  ,{id:5,keywords:'',resTitle:'RNG vs TOP KPL春季赛',subTitle:'更新至56期',href:''}
  ,{id:6,keywords:'',resTitle:'KPL极限操作：Knight艾克回到过去',subTitle:'更新至56期',href:''}
  ,{id:7,keywords:'',resTitle:'2018KPL【英雄麦克风】',subTitle:'更新至56期',href:''}
  ,{id:8,keywords:'',resTitle:'2018KPL春季赛第十周 WE vs SS回放',subTitle:'更新至56期',href:''}
  ,{id:9,keywords:'',resTitle:'2018王者荣耀KPL春季赛',subTitle:'更新至56期',href:''}
  ,{id:10,keywords:'',resTitle:'RNG vs TOP KPL春季赛',subTitle:'更新至56期',href:''}
];;

// 搜索结果
var resultLists = [
   {id:0,keywords:'KPL',resTitle:'2018王者荣耀KPL春季赛',subTitle:'更新至56期',href:''}
  ,{id:1,keywords:'KPL',resTitle:'2018KPL【英雄麦克风】',subTitle:'更新至56期',href:''}
  ,{id:2,keywords:'KPL',resTitle:'KPL极限操作：Knight艾克回到过去',subTitle:'更新至56期',href:''}
  ,{id:3,keywords:'KPL',resTitle:'KPL4月8日WE vs OMG第二场比赛视频',subTitle:'更新至56期',href:''}
  ,{id:4,keywords:'KPL',resTitle:'2018KPL春季赛第十周 WE vs SS回放',subTitle:'更新至56期',href:''}
  ,{id:5,keywords:'KPL',resTitle:'RNG vs TOP KPL春季赛',subTitle:'更新至56期',href:''}
  ,{id:6,keywords:'KPL',resTitle:'KPL极限操作：Knight艾克回到过去',subTitle:'更新至56期',href:''}
  ,{id:7,keywords:'KPL',resTitle:'2018KPL【英雄麦克风】',subTitle:'更新至56期',href:''}
  ,{id:8,keywords:'KPL',resTitle:'2018KPL春季赛第十周 WE vs SS回放',subTitle:'更新至56期',href:''}
  ,{id:9,keywords:'KPL',resTitle:'2018王者荣耀KPL春季赛',subTitle:'更新至56期',href:''}
  ,{id:10,keywords:'KPL',resTitle:'RNG vs TOP KPL春季赛',subTitle:'更新至56期',href:''}
];

var searchRecArrs = [
   {id:0,title:'梁上波与祝英台',img:'../image/test/anchor1.png'}
  ,{id:1,title:'美人鱼',img:'../image/test/anchor2.png'}
  ,{id:2,title:'中国戏曲',img:'../image/test/anchor3.png'}
];

// 键盘ID对应的值
var keyValueArr = [
   {val:'A'},{val:'B'},{val:'C'},{val:'D'},{val:'E'},{val:'F'}
  ,{val:'G'},{val:'H'},{val:'I'},{val:'J'},{val:'K'},{val:'L'}
  ,{val:'M'},{val:'N'},{val:'O'},{val:'P'},{val:'Q'},{val:'R'}
  ,{val:'S'},{val:'T'},{val:'U'},{val:'V'},{val:'W'},{val:'X'}
  ,{val:'Y'},{val:'Z'},{val:'1'},{val:'2'},{val:'3'},{val:'4'}
  ,{val:'5'},{val:'6'},{val:'7'},{val:'8'},{val:'9'},{val:'0'}
];

// 设置搜索结果的数量
var resNum = resultLists.length;
document.getElementById("searchResNum").innerHTML = resNum;
var header = document.getElementById("header");

// 加载页面默认第一个选中元素
var lis = header.getElementsByTagName('li');
var actiLiElem = lis[5];
//addClass(actiLiElem,'focus');


// 设置推荐位
for(var i = 0; i < searchRecArrs.length; i++){
  document.getElementsByClassName('recDiv')[i].style.backgroundImage = 'url('+ searchRecArrs[i]['img'] +')';
  document.getElementsByClassName('recDiv')[i].innerHTML = '<p>'+ searchRecArrs[i]['title'] +'</p>';
}

// 获取搜索结果
var resInnerHtml = '';
for(var j = 0; j < resultLists.length; j++){
  var curKeyWords = resultLists[j]['keywords'];
  var curTitle = resultLists[j]['resTitle'].replace(curKeyWords,'<span style="color:#d00404">'+ curKeyWords +'</span>');
  if (j % 2 == 0) {
    resInnerHtml += '<div id="res_'+ (j+1) +'" class="resTitle" style="background-image:url(../image/test/menuActive.png)"><p>'+ curTitle +'</p></div>';
  }else{
    resInnerHtml += '<div id="res_'+ (j+1) +'" class="resTitle" style="background-image:url(../image/test/menuNormal.png)"><p>'+ curTitle +'</p></div>';
  }
}
document.getElementById('resList').innerHTML = resInnerHtml;

/************************ 键盘触发事件 start ************************/
  // 焦点对应的类名及index
  var actKeyClsName = 'actKey';
  var actResClsName = 'actResTitle';
  var actRecClsName = 'actRecDiv';
  var curKeyIdx, curResIdx, curRecIdx;
  var curActKey, curActRes, curActRec;
  document.onkeydown = searchFocusEvent;
  var isClickEnter; // 是否按下回车

  var curKey = ''; // 当前的按键
  function searchFocusEvent(e){
    // 当前键盘/搜索结果/推荐的焦点及index
    curActKey = document.getElementsByClassName(actKeyClsName)[0];
    curActRes = document.getElementsByClassName(actResClsName)[0];
    curActRec = document.getElementsByClassName(actRecClsName)[0];
    if (curActKey) {
      curKeyIdx = parseInt(curActKey.id.replace('key_',''));
    }else if (curActRes) {
      curResIdx = parseInt(curActRes.id.replace('res_',''));
    }else if(curActRec) {
      curRecIdx = parseInt(curActRec.id.replace('searchRec',''));
    }

    e = e || window.event; //这一行及下一行是为兼容IE8及以下版本
    var curWhichKey = e.which;

    switch(curWhichKey){
      case 13: // 回车/OK
        isClickEnter == 1;

        // 第一次进入
        if (!curActKey && !curActRes && !curActRec) {
          setFocus('','','key_1',actKeyClsName,1);
        }else if (curActKey) { // 焦点在键盘时
          var kwDiv = getObjById('keywordsShow');
          var curWords = kwDiv.innerHTML;
          // 清空
          if (curKeyIdx == 37) {
            kwDiv.innerHTML = "";
          }else if (curKeyIdx == 38) {
            var newWords = curWords.substring(0,curWords.length-1);
            kwDiv.innerHTML = newWords;
          }else {
            kwDiv.innerHTML = curWords + keyValueArr[curKeyIdx-1]['val'];
          }
        }
        break;

      case 27: // ESC
        window.history.back();
        break;

      case 37: // 左
        curKey = 'l';
        commonEvent();
        break;

      case 38: // 上
        curKey = 'u';
        commonEvent();
        break;

      case 39: // 右
        curKey = 'r';
        commonEvent();
        break;
      
      case 40: // 下
        curKey = 'd';
        commonEvent();
        break;

      default:
        // 第一次进入
        if (!curActKey && !curActRes && !curActRec) {
          setFocus('','','key_1',actKeyClsName,1);
        }
        break;
    }
  }

  /*
   * 搜索页面的触发事件
   *
   */
  function commonEvent(){
    // 第一次进入
    if (!curActKey && !curActRes && !curActRec) {
      setFocus('','','key_1',actKeyClsName,1);
    }else if (curActKey) { // 焦点在键盘   
      if (curKey == 'd' || curKey == 'u') {
        var curKeyVal;
        if (curKeyIdx < 31) {
          curKeyVal = curKey == 'd' ? (curKeyIdx+6) : (curKeyIdx-6);

        }else if (curKeyIdx < 34 && curKeyIdx > 30) {
          curKeyVal = curKey == 'd' ? 37 : (curKeyIdx-6);
        }else if(curKeyIdx > 33 && curKeyIdx < 37) {
          curKeyVal = curKey == 'd' ? 38 : (curKeyIdx-6);
        }else if (curKeyIdx == 37) {
          curKeyVal = curKey == 'd' ? '' : 31;
        }else if (curKeyIdx == 38) {
          curKeyVal = curKey == 'd' ? '' : 36;
        }
        setFocus('key_'+curKeyIdx,actKeyClsName,'key_'+curKeyVal,actKeyClsName,2);
      }else if (curKey == 'r') { // 跳到搜索结果
        if (curKeyIdx % 6 == 0 || curKeyIdx == 38) {
          setFocus('key_'+curKeyIdx,actKeyClsName,'res_1',actResClsName,2);
          setActResList(resultLists,1);
        }else{
          setFocus('key_'+curKeyIdx,actKeyClsName,'key_'+(curKeyIdx+1),actKeyClsName,2);
        }
      }else {
        if (curKeyIdx % 6 != 1) {
          setFocus('key_'+curKeyIdx,actKeyClsName,'key_'+(curKeyIdx-1),actKeyClsName,2);
        }
      }
    }else if (curActRes) { // 焦点在搜索结果
      if (curKey == 'd' || curKey == 'u') {
        var nextResIdx = curKey == 'd' ? (curResIdx + 1) : (curResIdx - 1);
        setFocus('res_'+curResIdx,actResClsName,'res_'+nextResIdx,actResClsName,2);
        removeActResList(resultLists,curResIdx);
        setActResList(resultLists,nextResIdx);

        // 滚屏 先默认是大家都在搜列表
        scrollPage(resultLists,nextResIdx,0);

      }else if (curKey == 'l') {
        setFocus('res_'+curResIdx,actResClsName,'key_1',actKeyClsName,2);
        removeActResList(resultLists,curResIdx);
        
        // 滚屏回到默认状态
        scrollPage('','',1);
      }else if (curKey == 'r') {
        setFocus('res_'+curResIdx,actResClsName,'searchRec1',actRecClsName,2);
        removeActResList(resultLists,curResIdx);
        
        // 滚屏回到默认状态
        scrollPage('','',1);
      }
    }else if (curActRec) { // 焦点在推荐位
      if (curKey == 'd' || curKey == 'u') {
        var nextRecIdx = curKey == 'd' ? (curRecIdx + 1) : (curRecIdx - 1);
        setFocus('searchRec'+curRecIdx,actRecClsName,'searchRec'+nextRecIdx,actRecClsName,2);
      }else if (curKey == 'l') {
        setFocus('searchRec'+curRecIdx,actRecClsName,'res_1',actResClsName,2);
        setActResList(resultLists,1);
      }
    }
  }

  // 当结果列表被选中时，增加副标题
  function setActResList(curArr,idx){
    if (idx > curArr.length && curKey == 'd') {
      return;
    }else {
      setFocus('','','res_'+idx,'activeResTitle',1);
      var curSelectedTitle = curArr[idx-1]['resTitle'];
      var curSelectedSubTitle = curArr[idx-1]['subTitle'];
      var curResDomInner = '<p>'+ curSelectedTitle + '</p>' + '<p style="font-size:0.71em">' + curSelectedSubTitle +'</p>';
      getObjById('res_'+idx).innerHTML = curResDomInner;
    }
  }

  // 移除副标题
  function removeActResList(curArr,idx){
    if (idx == 1 && curKey == 'u') {
      return;
    }else if (idx >= curArr.length && curKey == 'd') {
      return;
    }else {
      setFocus('res_'+idx,'activeResTitle','','',0);
      var curSelectedTitle = curArr[idx-1]['resTitle'].replace(curKeyWords,'<span style="color:#d00404">'+ curKeyWords +'</span>');
      var curResDomInner = '<p>'+ curSelectedTitle + '</p>';
      getObjById('res_'+idx).innerHTML = curResDomInner;
    }
  }

  /*
   * 滚屏事件
   * curList: 当前的数据列表
   * nextRow: 焦点要移动到的下一行（也就是idx）
   * isClear: 为1时，右侧内容无焦点，页面回到顶部
   */
  function scrollPage(curList,nextRow,isClear){
    // marginTop值
    var scrollMT;

    if (isClear == 1) {
      scrollMT = 0;
    }else {
      var scrollVal = -3.04;

      // 开始滚动的行数
      var firScrollRow = 9;      

      var totalRow = curList.length;


      if (nextRow >= firScrollRow && nextRow <= totalRow) {
        scrollMT = scrollVal * (nextRow - firScrollRow + 1);
      }else if (nextRow < firScrollRow) {
        scrollMT = 0;
      }
    }
    
    getObjById('res_1').style.marginTop = scrollMT + 'em';
  }

/************************ 键盘触发事件 end ************************/

// 设置array
function setOtherArrs(oriArr,newArr){
  for(var arr_i = 0; arr_i < oriArr.length; arr_i++){
    newArr[arr_i] = new Object();
    newArr[arr_i].obj_id = oriArr[arr_i]['rl_entity_id'];
    newArr[arr_i].title = oriArr[arr_i]['rl_config_entity_title'];
    newArr[arr_i].img = setImageSrc(oriArr[arr_i]['rl_config_entity_cover_img_filepath'],oriArr[arr_i]['rl_config_entity_cover_img_url']);
  }
}